<template>
  <div class="list-up">
    <div class="content-list" @mouseenter="stop" @mouseleave="scroll">
      <a-row>
        <a-col :span="2">
          序号
        </a-col>
        <a-col :span="3">
          股票代码
        </a-col>
        <a-col :span="3">
          名称
        </a-col>
        <a-col :span="3">
          收盘价<span class="unit">(元)</span>
        </a-col>
        <a-col :span="2">
          跌涨额
        </a-col>
        <a-col :span="3">
          成交量<span class="unit">(万手)</span>
        </a-col>
        <a-col :span="2">
          最高价
        </a-col>
        <a-col :span="2">
          最低价
        </a-col>
        <a-col :span="2">
          总市值<span class="unit">(亿)</span>
        </a-col>
        <a-col :span="2">
          市盈率
        </a-col>
      </a-row>
      <div class="container">
        <div class="box"></div>
        <div class="list" id="tableList">
          <a-row v-for="(item, index) in tabTitleArr" :key="index">
            <a-col :span="2">
              {{index + 1}}
            </a-col>
            <a-col :span="3">
              000000
            </a-col>
            <a-col :span="3">
              杭州解百
            </a-col>
            <a-col :span="3">
              00.00
            </a-col>
            <a-col :span="2" :class="['colum','addActive']">
              +0.01
            </a-col>
            <a-col :span="3">
              00.00
            </a-col>
            <a-col :span="2">
              00.00
            </a-col>
            <a-col :span="2">
              00.00
            </a-col>
            <a-col :span="2">
              6210
            </a-col>
            <a-col :span="2">
              00.00
            </a-col>
          </a-row>
        </div>
      </div>
      <div class="code" v-if="show">
        <img src="../asset/img/1FB5BDEB-2F8B-423E-A5AF-71C9F443E3E5.png" alt="">
        <img src="../asset/img/FCB00D74-B3AC-4784-B183-9C8E0A74A00A.png" alt="">
        <img src="../asset/img/3199F034-3EE3-4242-A180-20D3087A8E17.png" alt="">
      </div>
    </div>
    <div class="aside-content">
      <p>实现思路：</p>
      <a-collapse class="lineCard" @change="change">
        <a-collapse-panel :key="index" :header="item.title" v-for="(item, index) in contentData">
          <p>{{item.cont}}</p>
        </a-collapse-panel>
      </a-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ListUp',
  props: {

  },
  components: {

  },
  data () {
    return {
      interval: null,
      tabTitleArr: [{
        name: '宗数',
        code: 0,
        unit: '宗'
      },
      {
        name: '序号',
        code: 0
      },
      {
        name: '股票代码',
        code: 1,
        unit: 'm²'
      },
      {
        name: '名称',
        code: 2
      },
      {
        name: '收盘价',
        code: 3,
        unit: '元'
      },
      {
        name: '跌涨额',
        code: 4
      },
      {
        name: '成交量',
        code: 5,
        unit: '万手'
      },
      {
        name: '最高价',
        code: 6
      },
      {
        name: '最低价',
        code: 7
      },
      {
        name: '总市值',
        code: 8,
        unit: '亿'
      },
      {
        name: '市盈率',
        code: 5
      }],
      contentData: [{
        title: '盒子层级准备',
        cont: '最外层需要一个滚动空间的父盒子(container)；里面需要第一个子元素(box)是一个空盒子作为滚动列表(list)的初始化空白展示页，所以高度要和父盒子一致；另外需要给父盒子增加一个虚拟元素after空盒子作为滚动列表结束时的空白展示页'
      },
      {
        title: '样式设置注意',
        cont: '样式上设置需注意，除了展示的样式外，父盒子(container)设置overflow-y: auto;可以让滚动列表根据列表的行的多少自适应来是否展示滚动条，父盒子里的after元素一定要是block元素，因为inline-block元素有高度偏差'
      },
      {
        title: '涉及高度认识',
        cont: 'scrollHeight是获取盒子的本身高度，scrollTop指的是当前展示页的滚动条距离滚动条顶部的距离(指的是超出展示范围的高度，当滚动条滑到最底部时，展示的当前页是after元素，展示页高度是不计算入滚动条到顶部的距离)'
      },
      {
        title: '代码实现',
        cont: '由于滚动条到顶部的距离scrollTop等于box的scrollHeight加上滚动列表的scrollHeight，所以当scrollTop小于两个scrollHeight相加数时，用计数变量累加赋值给滚动条到顶部的距离，在定时器内动态改变赋值过程'
      }],
      count: 0,
      show: false
    }
  },
  created () {

  },
  mounted () {
    this.scroll()
  },
  watch: {

  },
  methods: {
    change (key) {
      if (key.indexOf(3) !== -1) {
        this.show = !this.show
      } else {
        this.show = false
      }
    },
    stop () {
      clearInterval(this.interval)
    },
    scroll () {
      this.carouselSet()
    },
    carouselSet () {
      this.$nextTick(() => {
        const tableList = document.getElementById('tableList')
        const container = document.getElementsByClassName('container')[0]
        const box = document.getElementsByClassName('box')[0]
        if (this.interval) {
          clearInterval(this.interval)
        }
        this.interval = setInterval(() => {
          if (tableList) {
            if (container.scrollTop < box.scrollHeight + tableList.scrollHeight) {
              ++this.count
            } else {
              this.count = 0
            }
            container.scrollTop = this.count
          }
        }, 50)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.list-up{
  display: grid;
  grid-template-columns: 60% 40%;
  background: rgba(49, 150, 250, 0.1);
  .content-list{
    height: 2.83rem;
    text-align: center;
    .unit{
      font-size: .12rem;
    }
    .addActive{
      color: #D0263B;
    }
    ::v-deep{
      >.ant-row:nth-child(1){
        box-sizing: border-box;
        height: 0.58rem;
        border-radius: 0;
        line-height: .58rem;
        font-size: 0.14rem;
        font-weight: 500;
        color: #3196FA;
        background: rgba(49, 150, 250, 0.14);
      }
    }
    .container{
      overflow-y: auto;
      height: 2.25rem;
      .box{
        height: 2.25rem;
      }
      &::after{
       content: '';
       display: block;
       height: 2.25rem;
     }
    }
    .code{
      padding: .18rem 0rem 0rem .18rem;
      margin: .1rem 0rem .1rem .1rem;
      background: white;
      display: flex;
      >img:nth-child(1),>img:nth-child(2){
        width: 1.7rem;
      }
      >img:nth-child(3){
        width: 5.5rem;
      }
    }
    .list{
      >.ant-row {
        margin: auto;
        height: .42rem;
        font-size: 0.14rem;
        line-height: .41rem;
        &:nth-of-type(2n) {
          height: 0.42rem;
          background: linear-gradient(90deg, rgba(31, 85, 113, .1) 0%, rgba(23, 71, 118, .1) 100%);
          border-radius: 0.21rem;
        }
      }
    }
  }
  .aside-content{
    box-sizing: border-box;
    padding: .18rem 0rem 0rem .18rem;
    .lineCard{
      margin-top: .18rem;
    }
  }
}
</style>
